@function r($px){
  @return $px/75#{rem};
}
$mainColor:#ff801a;
$bg:#f5f5f5;
$headerFontColor:#666666;
$textMainColor: #333333;
$textSecondColor:#999999;
.coupon-container{
  height: 100vh;
  background: $bg;
  overflow: hidden;
  @at-root .coupon-page-hd{
    background-color: #fff;
    font-size: 0;
    @at-root .header_item{
      font-size: 16px;
      display: inline-block;
      vertical-align: middle;
      width: 25%;
      line-height: r(92);
    }
    @at-root .header_left{
      line-height: r(92);
      padding-left: r(32);
      box-sizing: border-box;
      i{
        vertical-align: middle;
        display: inline-block;
        width: r(36);
        height: r(92);
        background-image: url("./img/back.png");
        background-repeat: no-repeat;
        background-position: center;
      }
    }
    @at-root .header_middle{
      width: 50%;
      text-align: center;
      font-size: r(32);
      color: $headerFontColor;
    }
    @at-root .header_right{
      line-height: r(92);
      padding-right: r(32);
      box-sizing: border-box;
      text-align: right;
      i{
        vertical-align: middle;
        display: inline-block;
        width: r(36);
        height: r(92);
        background-image: url("./img/gengduo.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: r(40);
      }
    }
  }
  @at-root .credit-tradition{
    padding-left: r(32);
    color: $textSecondColor;
    font-size: r(28);
    line-height: r(100);
    .credit-tradition_active{
      color: #5b93ee;
    }
  }
  @at-root .coupon-page-bd{
    padding: 0 r(32);
    box-sizing: border-box;
    @at-root .coupon{
      position: relative;
      height: r(260);
      background-color: #fff;
      overflow: hidden;
      font-size: 0;
      &::before,&::after{
        content: '';
        display: inline-block;
        width: r(30);
        height: r(30);
        background-color: $bg;
        border-radius: 50%;
        position: absolute;
        left: r(219);
        top: r(-15);
        bottom: r(-15);
      }
      &::after{
        top: unset;
      }
      @at-root .coupon-item_tag{
        display: inline-block;
        width: r(113);
        line-height: r(37);
        text-align: center;
        transform: rotate(-45deg) translate(r(-28), r(-12));
        background-color: $mainColor;
        color: #fff;
        position: absolute;
        font-size: r(12);
      }
      @at-root .coupon-item{
        display: inline-block;
        font-size: r(22);

        vertical-align: middle;
      }
      @at-root .coupon-item_left{
        padding: r(66) 0;
        text-align: center;
        width: r(234);
        border-right: 1px dashed $bg;
        @at-root .coupon-item_value{
          display: block;
          color: $mainColor;
          font-size: r(45);
          line-height: r(75);
        }
        @at-root .coupon-item_condition{
          display: block;
          color: $mainColor;
          font-size: r(22);
          line-height: r(52);
        }
      }
      @at-root .coupon-item_middle{
        padding: r(66) 0;
        width: r(363);
        //height: inherit;
        p{
          margin: 0;
        }
      }
      @at-root .coupon-item_right{
        width: r(87);
        height: inherit;
        background: #fff;
        color: #ff801a;
        box-sizing: border-box;
        border-left: 1px dashed #eee;
        @at-root .receive-coupon_content{
          width: inherit;
          height: inherit;
          display: table-cell;
          vertical-align: middle;
          text-align: center;
          @at-root .receive-coupon_text{
            display: inline-block;
            width: 1em;
            height: 4em;
            font-size: r(22);
          }
        }
      }
    }
  }
}